<template>
    <div class="login">
        <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
        >
            <h3 class="title">多优多后台管理系统</h3>
            <el-form-item prop="username">
                <el-input
                    v-model="loginForm.username"
                    type="text"
                    auto-complete="off"
                    placeholder="账号"
                >
                    <template #prefix>
                        <svg-icon
                            icon-class="user"
                            class="el-input__icon input-icon"
                        />
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                    v-model="loginForm.password"
                    type="password"
                    auto-complete="off"
                    placeholder="密码"
                    show-password
                    @keyup.enter="handleLogin"
                >
                    <template #prefix>
                        <svg-icon
                            icon-class="password"
                            class="el-input__icon input-icon"
                        />
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input
                    v-model="loginForm.code"
                    auto-complete="off"
                    placeholder="验证码"
                    style="width: 55%"
                    @keyup.enter="handleLogin"
                >
                    <template #prefix
                        ><svg-icon
                            icon-class="validCode"
                            class="el-input__icon input-icon"
                    /></template>
                </el-input>
                <div class="login-code">
                    <img
                        :src="codeUrl"
                        @click="getCode()"
                        class="login-code-img"
                        title="看不清？点击更换"
                    />
                </div>
            </el-form-item>
            <el-checkbox
                v-model="loginForm.rememberMe"
                style="margin: 0px 0px 25px 0px"
                >记住密码</el-checkbox
            >
            <el-form-item style="width: 100%">
                <el-button
                    :loading="loading"
                    type="primary"
                    size="large"
                    style="width: 100%"
                    @click="handleLogin"
                >
                    <span v-if="!loading">登 录</span>
                    <span v-else>登 录 中...</span>
                </el-button>
            </el-form-item>
        </el-form>
        <!--  底部  -->
        <div class="el-login-footer">
            <a class="text-color" href="https://beian.miit.gov.cn" target="_blank">苏ICP备2020069895号-1</a>  |
            <span>Copyright © 2018-2021 dyd.com All Rights Reserved.</span>
        </div>
    </div>
</template>

<script lang="ts" name="Login" setup>
import Login from '@/api/request/login';
const {
	loginFormRef, loginForm, loginRules, codeUrl, loading, getCode, handleLogin,
} = Login();

</script>

<style lang="scss" scoped>
.login {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
    background-color: #303a4b;
	// background-image: url("../assets/images/login-background.jpg");
	// background-size: cover;
}

.title {
	margin: 0px auto 30px auto;
	text-align: center;
	color: #707070;
}

.login-form {
	border-radius: 6px;
	background: #ffffff;
	width: 400px;
	padding: 25px 25px 5px 25px;

	.el-input {
		height: 38px;

		input {
			height: 38px;
		}
	}

	.input-icon {
		height: 39px;
		width: 14px;
		margin-left: 2px;
	}
}

.login-tip {
	font-size: 13px;
	text-align: center;
	color: #bfbfbf;
}

.login-code {
	width: 33%;
	height: 38px;
	float: right;

	img {
		cursor: pointer;
		vertical-align: middle;
        margin: 0 0 0 30%;
	}
}

.el-login-footer {
	height: 40px;
	line-height: 40px;
	position: fixed;
	bottom: 0%;
	width: 100%;
	text-align: center;
	color: #fff;
	font-family: Arial;
	font-size: 12px;
	letter-spacing: 1px;
}
.login-code-img {
	height: 38px;
}
</style>
